<template>
  <view
    class="viewd"
    :style="[{ backgroundColor: hasDataFlag == true ? '' : '#fff' }]"
  >
    <cu-custom bgColor="bgcolorfff" :isBack="true">
      <block slot="content"><view class="toptext">最近浏览</view></block>
    </cu-custom>

    <view
      v-for="(item, index) in collData"
      :key="index"
      class="list"
      @click="jump(item)"
    >
      <view class="viewlist">
        <view class="lefttext">
          <text>{{ item.title }}</text>
          <text>{{ item.category.name }}</text>
        </view>
        <view class="rightpic">
          <view
            :style="[{ backgroundImage: `url(${item.covers[0].fileUrl})` }]"
          ></view>
        </view>
      </view>
    </view>
    <view class="no-viewed" v-if="!hasDataFlag">
      <image
        src="https://static.77du.net/template/ciff/img/noviewed.png"
        mode="widthFix"
      />
      <text>没有记录哦---</text>
      <view class="flex-c">去逛逛</view>
    </view>

    <loading v-if="loadingflag"></loading>
  </view>
</template>

<script>
import { userHistory } from "../../api/api";
export default {
  data() {
    return {
      collData: [],
      tabhight: 0,
      index: 0,
      size: 10,
      nodata: false,
      hasDataFlag: true,
    };
  },
  //触底加载
  onReachBottom() {
    if (!this.nodata) {
      this.getAllHistory();
    }
  },
  methods: {
    async getAllHistory() {
      this.loadingflag = true;
      this.index++;
      const res = await userHistory(this.index, this.size);
      if (res[1].data.code === "000000") {
        this.loadingflag = false;
        const { content } = res[1].data.data;
        this.collData.push(...(content || []));
        this.collData.length > 0
          ? (this.hasDataFlag = true)
          : (this.hasDataFlag = false);
        if ((content && content.length < 10) || content == null) {
          //没有数据了
          this.nodata = true;
        }
      }
    },
    jump(item) {
      let url = "";
      if (item.type == 2) {
        //图文
        url = "/pages/article/article?id=" + item.id;
      } else if (item.type == 3) {
        //图集
        url = "/pages/photo/photo?id=" + item.id;
      } else if (item.type == 5) {
        //视频
        url = "/pages/video/video?id=" + item.id;
      } else if (item.type == 7) {
        //专题
        url = "/pages/picAtlas/picAtlas";
      } else if (item.type == 6) {
        //排行榜
        url = "/pages/crunchies/crunchies";
      } else if (item.type == 1) {
        return;
      }
      uni.navigateTo({
        url,
      });
    },
  },
  onLoad() {
    this.index = 0;
    this.size = 10;
    this.nodata = false;
    this.hasDataFlag = true;
    this.collData = [];
    this.getAllHistory();
  },
};
</script>

<style lang="scss" scoped>
.list {
  margin-top: 8rpx;
}
.viewd {
  height: 100vh;
}
.no-viewed {
  width: 100%;
  text-align: center;
  margin-top: 194rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  image {
    width: 336rpx;
    height: 332rpx;
  }
  > text {
    margin-top: 58rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(162, 162, 162, 1);
  }
  > view {
    width: 265rpx;
    height: 73rpx;
    background: rgba(255, 0, 0, 1);
    border-radius: 37rpx;
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    margin-top: 50rpx;
  }
}
.viewlist {
  padding: 42rpx 46rpx 30rpx 44rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  .lefttext {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    > text {
      &:first-child {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: rgba(36, 36, 36, 1);
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        letter-spacing: 2rpx;
      }
      &:last-child {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(117, 117, 117, 1);
      }
    }
  }
  .rightpic {
    width: 218rpx;
    border-radius: 10rpx;
    margin-left: 37rpx;
    > view {
      width: 218rpx;
      height: 182rpx !important;
      background-size: cover;
      background-repeat: no-repeat;
    }
  }
}
</style>
